<!-- in-enum 枚举 -->
<template>
    <el-form-item :label="jmname" class="c-item">
   <!-- {{jtype}} -->
        <el-radio-group v-if="jtype === '1'" v-model="modelValue" @change="onChange">
            <el-radio label="" v-if="def">{{def}}</el-radio>
            <el-radio v-for="j in jvList" :key="j.key" :label="j.key">{{j.value}}</el-radio>
        </el-radio-group>
        
        <el-radio-group v-if="jtype === '2'" v-model="modelValue" @change="onChange" class="s-radio-text">
     
            <el-radio v-for="j in jvList" :key="j.key" :label="j.key">{{j.value}}</el-radio>
        </el-radio-group>
        <el-radio-group v-if="jtype === '3'" v-model="modelValue" @change="onChange" size="default">
            <el-radio-button label="" v-if="def">{{def}}</el-radio-button>
            <el-radio-button v-for="j in jvList" :key="j.key" :label="j.key">{{j.value}}</el-radio-button>
        </el-radio-group>
        <el-select v-if="jtype === '4'" v-model="modelValue" @change="onChange" style="width: 100%;">
            <el-option label="" v-if="def" :value="def"></el-option>
            <el-option v-for="j in jvList" :key="j.key" :label="j.value" :value="j.key"></el-option>
        </el-select>
        <el-select  v-if="jtype === '5'"  v-model="modelValue"  @change="onChange"  multiple placeholder="Select"    style="width: 240px"
    > <el-option label="" v-if="def" :value="def"></el-option>

            <el-option v-for="j in jvList" :key="j.key" :label="j.value" :value="j.key"></el-option>
    
    </el-select>
        <!-- 备注信息 -->
        <span class="c-remark" v-if="remark">{{remark}}</span>
    </el-form-item>
</template>

<script > 

 
export default {
  name: "JmEnum",
    data() {
        return {
            jvList:{}
        }
        }, 
   props:{
	         type: {},
            // 标题 
            jmname: {},
            // 绑定值 
            modelValue: {},
            // 提示文字 
            placeholder: {},
            // 备注文字
            remark: {}, 
            // 是否禁用 
            disabled: {},
            // type=enum时，值列表    -- 形如：{1: '正常[green]', 2: '禁用[red]'}  
            jv: {},
            // type=enum时，具体的展示类型 -- 1=单选框，2=单选文字，3=单选按钮，4=单选下拉框
            jtype: {default: '1'},
            // type=enum时，增加的默认项文字 
            def: {},
         
	},
    mounted() {
     this.parseJv()
     
  },   
   watch: {
       //监听内容
       jv() {
        this.parseJv(this.parseJv)
      }
    },
     methods:{ 
        parseJv(jv) {
            console.log(this.jv,this.modelValue,"结果");
            jv= this.jv;
            this.jvList = [];
            for(let key in jv) {
                let value = jv[key];
                let color = '';
                // 
                if(value.indexOf('[') !== -1 && value.endsWith(']')) {
                    let index = value.indexOf('[');
                    color = value.substring(index + 1, value.length - 1);
                    value = value.substring(0, index);
                    // console.log(color + ' --- ' + value);
                }
                // 
                if(isNaN(key) === false) {
                    key = parseInt(key);
                }
                
                this.jvList.push({
                    key: key,
                    value: value,
                    color: color
                })
            }
            // console.log( this.jvList);
        },
        onChange($event) { 
            this.$emit('update:modelValue', $event);
        },

         
    },
};	
 

   
// // input值发生变化时触发
// const onChange = function($event) {
//     proxy.$emit('update:modelValue', $event);
// };

  

</script>
 